<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script type="text/javascript" src="js/jquery-1.11.0.min.js"></script>
    <!-- 引入 layui.css -->
    <link rel="stylesheet" href="//unpkg.com/layui@2.6.8/dist/css/layui.css" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/layui/2.7.6/layui.js"></script>
    <script>
      layui.use("layer", function () {
        var layer = layui.layer;
      });
    </script>
    <title>富乐万家应用下载</title>
    <style>
      html,
      body,
      .wrap {
        margin: 0;
        width: 100%;
        max-height: 100%;
        height: 100%;
        box-sizing: border-box;
      }

      body {
        background-image: url("./images/tip.png");
        background-repeat: no-repeat;
        background-size: 100% 100%;
      }

      .wrap {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-between;
        padding: 200px 0;
      }

      .wrap-top {
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 100%;
      }

      .img {
        width: 100%;
      }

      .downLoad {
        width: 60%;
        height: 50px;
        background: linear-gradient(180deg, #ff561d 33%, #ff0064 100%);
        border-radius: 8px;
        text-align: center;
        line-height: 50px;
        color: #fff;
        font-size: 18px;
        font-weight: 600;
      }

      .txt {
        color: #fff;
        font-size: 16px;
        margin-left: 5px;
      }

      .flex {
        display: flex;
        align-items: center;
        margin-top: 10px;
      }

      .popop {
        width: 100%;
        height: 100%;
        position: absolute;
        left: 0;
        top: 0;
        background-color: rgba(0, 0, 0, 0.4);
        color: #fff;
        display: flex;
        align-items: center;
        flex-direction: column;
        padding-top: 30%;
        text-align: left;
        display: none;
      }

      .jian {
        width: 20%;
        position: absolute;
        right: 7%;
        top: 0;
      }
    </style>
  </head>
  <body>
    <div class="popop">
      <div>点击右上角...</div>
      <div style="margin-top: 10px">选择在浏览器中打开</div>
      <img src="./images/jiantou.png" class="jian" alt="" />
    </div>

    <div class="wrap">
      <div class="wrap-top">
        <img src="./images/logo.png" alt="" />
        <div style="color: #fff; font-size: 28px; margin-top: 8px">
          富乐万家
        </div>
      </div>
      <div class="wrap-top">
        <div style="color: #fff; font-size: 14px; margin-top: 10px">
          欢迎来到富乐万家
        </div>
        <div class="downLoad" style="margin-top: 20px">立即下载</div>
        <div class="flex">
          <img
            src="./images/icon_anquanyinyong.png"
            width="20"
            height="20"
            alt=""
          />
          <div class="txt">安全应用</div>
        </div>
      </div>
    </div>
  </body>
  <script>
    var baseUrl = "https://api.fulewanjia.com/fulewanjia";
    var browser = {
      versions: (function () {
        var u = navigator.userAgent,
          app = navigator.appVersion;
        return {
          //移动终端浏览器版本信息
          trident: u.indexOf("Trident") > -1, //IE内核
          presto: u.indexOf("Presto") > -1, //opera内核
          webKit: u.indexOf("AppleWebKit") > -1, //苹果、谷歌内核
          gecko: u.indexOf("Gecko") > -1 && u.indexOf("KHTML") == -1, //火狐内核
          mobile: !!u.match(/AppleWebKit.*Mobile.*/), //是否为移动终端
          ios: !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/), //ios终端
          android: u.indexOf("Android") > -1 || u.indexOf("Linux") > -1, //android终端或uc浏览器
          iPhone: u.indexOf("iPhone") > -1, //是否为iPhone或者QQHD浏览器
          iPad: u.indexOf("iPad") > -1, //是否iPad
          webApp: u.indexOf("Safari") == -1, //是否web应该程序，没有头部与底部
        };
      })(),
      language: (navigator.browserLanguage || navigator.language).toLowerCase(),
    };

    $(".downLoad").click(function () {
      var wexin = isWeiXin();
      if (wexin == 1) {
        $(".popop").show();
        // 是微信浏览器，执行操作
      } else if (wexin == 3) {
        //安卓下载
        $.ajax({
          url: `${baseUrl}/system/version/getNewVersion`, //注册
          data: {
            state: 1,
          },
          type: "get",
          success: function (data) {
            location.href =
              "https://file.fulewanjia.com/fulewanjia" + data.data.url;
          },
          error: function (err) {
            alert(JSON.stringify(err));
          },
        });
      } else if (wexin == 2) {
        //iOS下载
        $.ajax({
          url: `${baseUrl}/system/version/getNewVersion`, //注册
          data: {
            state: 1,
            isIos: 1,
          },
          type: "get",
          success: function (data) {
            location.href =
              "https://file.fulewanjia.com/fulewanjia" + data.data.url;
          },
        });
        // layer.msg("苹果系统拼命建设中!<br/>非常感谢您的关注！");
        //location.href="http://wx.qmyd.org/qmyd.ipa";
      } else {
        layer.msg(
          "仅支持Android和IOS系统，当前系统不支持!<br/>非常感谢您的关注！"
        );
      }
      return false;
    });

    //关闭邀请页
    $(".popop").click(function () {
      $(".popop").hide();
    });

    //判断是否是微信浏览器的函数
    function isWeiXin() {
      var ua = window.navigator.userAgent.toLowerCase();
      //通过正则表达式匹配ua中是否含有MicroMessenger字符串
      if (ua.match(/MicroMessenger/i) == "micromessenger") {
        return 1;
      } else if (browser.versions.ios) {
        return 2;
        //是否在IOS浏览器打开
      } else if (browser.versions.android) {
        //是否在安卓浏览器打开
        return 3;
      } else {
        return 0;
      }
    }
  </script>
</html>
